<template>
    <div class="home-page">
        <!-- <div class="home-left"> -->
            <div class="home-left-top">
                <div class="l-t-ctn">
                    <el-carousel height="244px" :interval="4000" type="card">
                        <el-carousel-item v-for="item in lunboList" :key="item.id">
                            <img :src="item.picture" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>


            <div class="home-bottom">
                <div class="home-left-btm border-all">
                    <div class="new-top">
                        <div class="new-title">最新动态</div>
                        <div class="new-more" @click="toInfo">更多</div>
                    </div>
                    <div class="inew-ul">
                        <div class="tempWrap">
                            <ul>
                                <li v-for="(item,index) in newsList" :key="index">
                                    <span>
                                        {{item.title}}
                                    </span>
                                   <!-- <span>{{item.ttime}}</span>-->
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>


                <div class="home-right border-all">
                    <div class="new-top">
                        <div class="new-title">教授简介</div>
                            <!--<div class="new-more" @click="toIntro">更多</div>-->
                    </div>
                    <!-- 课题组简介 -->
                    <TeacherIntro />
                </div>


            </div>

        <!-- </div> -->


    </div>
</template>

<script>
import TeacherIntro from "./components/teacherIntro"
export default {
    components:{
        TeacherIntro
    },
    data(){
        return {
            lunboList:[],
            newsList:[]
        }
    },
    mounted(){
        this.getLunboList();
        this.getNews();
    },
    methods:{
        // 首页获取轮播列表
        getNews(){
            this.centralControl.axios.centralControl(
                'getNews',
                res => {
                    this.newsList=res;
                },
                {}
            );
        },
        // 获取轮播图
        getLunboList(){
            this.centralControl.axios.centralControl(
                'getLunbo',
                res => {
                    this.lunboList=res;
                },
                {}
            );
        },
        // 跳转至更多课题组
        toIntro(){
            this.$router.push("/projectIntro")
        },
        toInfo(){
            this.$router.push("/infoList")
        },
    }
}
</script>

<style lang="less">
.home-page {
    // display: flex;
    min-height: 810px;
    .home-bottom {
        display: flex;
    }

    .home-left-top {
        width: 100%;
        height: 290px;
        .l-t-ctn {
            background: url(../../assets/img/bgb.png) no-repeat center top;
            width: 100%;
            height: 244px;
            position: relative;
            text-align: center;
            .small {
                margin-top: 100px;
            }
            padding-bottom: 20px;
            border-bottom: 2px solid #00659B;
            img {
                width: 100%;
            }
        }
    }
    .home-left-btm {
        min-height: 714px;
        padding: 30px;
        margin-right: 20px;
        background-size: 85% 100%;
        .inew-ul {
            padding-top: 10px;
            .tempWrap {
                overflow: hidden;
                position: relative;
                height: 348px;
            }
            ul {
                height: 754px;
                margin: 0;
                padding: 0;
                position: relative;
            }
        }
        .inew-ul{
            padding-top: 10px;
        }
        .inew-ul ul li{
            line-height: 28px;
        }
        .inew-ul ul li a{
            font-size: 16px;
            color: #444;
            text-decoration: none;
        }
        .inew-ul ul li span{
            font-size: 16px;
            color: #444;

        }
    }
    .home-right {
        // float: right;
        // width: 700px;
        // background: url(../../assets/img/bg2.jpg) no-repeat center top;
        min-height: 714px;
        padding: 30px 40px;
        background-size:100% 96%;
        flex: 3;
    }
    .new-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #00659B;
        padding-bottom: 5px;
        height: 30px;
        .new-title{
            font-size: 18px;
            font-weight: bold;
            color: #00659B;
        }
        .new-more {
            display: block;
            color: #fff;
            background: #00659B;
            // background: url(../../assets/img/more.png) no-repeat left top;
            width: 48px;
            height: 22px;
            line-height: 20px;
            display: block;
            font-size: 12px;
            text-align: center;
            margin-top: 5px;
            text-decoration: none;
            cursor: pointer;
        }
    }
}

@media screen and (max-width: 1150px) {
    .home-page{
        .home-left {
            // .home-left-top {
            //     width: 200px;
            // }
            // .home-left-btm {
            //     width: 214px;
            // }
        }
    }

}
</style>
